<script setup>
const visible = ref(false);
const textarea = ref('');

const show = () => {
  visible.value = true;
  textarea.value = '';
};
const handleSubmit = () => {
  visible.value = false;
};

defineExpose({
  show,
});
</script>

<template>
  <el-dialog class="todo-container-approval" v-model="visible" title="填写审批意见并提交" width="640" append-to-body>
    <label class="opinion__label">审批意见：</label>
    <el-input
      v-model="textarea"
      maxlength="200"
     :autosize="{ minRows: 12 }"
      placeholder="请填写审批意见，最多200。"
      show-word-limit
      type="textarea"
    />
    <div class="opinion-upload">
      <basic-upload>
        <span class="opinion-upload__label">附件：</span>
        <span class="opinion-upload__btn">上传</span>
        <span class="opinion-upload__tip">上传附件大小50MB以内</span>
      </basic-upload>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.todo-container-approval {
  .el-dialog__body {
    padding: 0 22px;

    .opinion__label {
      height: 14px;
      font-size: 14px;
      font-weight: 400;
      color: #25292C;
      line-height: 36px;
    }
  }

  .el-dialog__footer {
    border-top: 0;
  }

  .opinion-upload {
    margin-top: 10px;
    display: flex;
    align-items: flex-end;

    .opinion-upload__label {
      height: 13px;
      font-size: 14px;
      font-weight: 400;
      color: #25292C;
      line-height: 14px;
    }

    .opinion-upload__btn {
      display: inline-block;
      height: 15px;
      font-size: 14px;
      font-weight: 400;
      color: #2E72EF;
      line-height: 14px;
      border-bottom: 1px solid #2E72EF;
    }

    .opinion-upload__tip {
      margin-left: 9px;
      height: 12px;
      font-size: 12px;
      font-weight: 400;
      color: #989DA3;
      line-height: 12px;
    }
  }
}
</style>
